<template>
  <div class="page">
    <div class="top">
      <div
        class="left-item"
        :class="{ 'active-left': type == 1 }"
        @click="handleFirstType"
      ></div>
      <div
        class="right-item"
        :class="{ 'active-right': type == 2 }"
        @click="handleStepType(2)"
      ></div>
    </div>
    <div class="bottom">
      <div
        class="bottom-item bottom1"
        :class="{ 'active-1': type == 3 }"
        @click="handleStepType(3)"
      ></div>
      <div
        class="bottom-item bottom2"
        :class="{ 'active-2': type == 4 }"
        @click="handleStepType(4)"
      ></div>
      <div
        class="bottom-item bottom3"
        :class="{ 'active-3': type == 5 }"
        @click="handleStepType(5)"
      ></div>
      <div
        class="bottom-item bottom4"
        :class="{ 'active-4': type == 6 }"
        @click="handleStepType(6)"
      ></div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
import { getExistSubjectOne, clearHistoryData } from "@/api/api.js";

const type = ref();
const line1 = ref();
const line2 = ref();
const handleFirstType = () => {
  if (flag.value) {
    router.push({
      path: "info",
      query: {
        type: 1,
        chuang: line1.value,
        yuan: line2.value,
      },
    });
  } else {
    router.push({
      path: "list",
      query: {
        type: 1,
        chuang: line1.value,
        yuan: line2.value,
      },
    });
  }
};

const handleStepType = (step) => {
  if (flag.value) {
    router.push({
      path: "step",
      query: {
        type: step,
        chuang: line1.value,
        yuan: line2.value,
      },
    });
  }
};
const flag = ref(false);
const getExistSubjectOneFn = async () => {
  const data = await getExistSubjectOne();
  console.log(data, "getExistSubjectOne");
  flag.value = data.data.flag;
};
const clearHistoryDataFn = async () => {
  const data = await clearHistoryData();
  console.log("clear", data);
};

onMounted(() => {
  getExistSubjectOneFn();
  //   clearHistoryDataFn();
  type.value = route.query.type || "";
  line1.value = route.query.chuang || "";
  line2.value = route.query.yuan || "";
});
</script>
<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.page {
  width: 1920px;
  height: 1080px;
  padding-top: 12%;
  .bottom {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    .bottom-item {
      width: 255px;
      height: 275px;
      cursor: pointer;
    }
    .bottom1 {
      background: url(./assets/02.png) no-repeat top center / 100%;
      &:hover {
        background: url(./assets/02-2.png) no-repeat top center / 100%;
      }
      &.active-1 {
        background: url(./assets/02-2.png) no-repeat top center / 100%;
      }
    }
    .bottom2 {
      background: url(./assets/03.png) no-repeat top center / 100%;
      &:hover {
        background: url(./assets/03-2.png) no-repeat top center / 100%;
      }
      &.active-2 {
        background: url(./assets/03-2.png) no-repeat top center / 100%;
      }
    }
    .bottom3 {
      background: url(./assets/04.png) no-repeat top center / 100%;
      &:hover {
        background: url(./assets/04-2.png) no-repeat top center / 100%;
      }
      &.active-3 {
        background: url(./assets/04-2.png) no-repeat top center / 100%;
      }
    }
    .bottom4 {
      background: url(./assets/05.png) no-repeat top center / 100%;
      &:hover {
        background: url(./assets/05-2.png) no-repeat top center / 100%;
      }
      &.active-4 {
        background: url(./assets/05-2.png) no-repeat top center / 100%;
      }
    }
  }
  .top {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3%;
    margin-bottom: 6%;
    .left-item,
    .right-item {
      width: 450px;
      height: 200px;
      cursor: pointer;
    }
    .left-item {
      background: url(./assets/00.png) no-repeat top center / 100%;
      &:hover {
        background: url(./assets/00-2.png) no-repeat top center / 100%;
      }
      &.active-left {
        background: url(./assets/00-2.png) no-repeat top center / 100%;
      }
    }
    .right-item {
      background: url(./assets/01.png) no-repeat top center / 100%;
      &:hover {
        background: url(./assets/01-2.png) no-repeat top center / 100%;
      }
      &.active-right {
        background: url(./assets/01-2.png) no-repeat top center / 100%;
      }
    }
  }
}
</style>
